<template>
  <Layout>
    <Dividetb>
      <template #top>
        <TopBox :title="'回收站'">
          <FilterSearch
            :placeholder="'请输入名称'"
            :searchCallBack="searchCallBack"
          />
          <topButtonGroup :buttonList="tbuttonList" />
        </TopBox>
      </template>
      <template #bottom>
        <div class="tableBox">
          <el-table
            class="listTable"
            :data="tableData"
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
            @cell-mouse-enter="cellMouseEnter"
            @cell-mouse-leave="cellMouseLeave"
            ref="tableRef"
          >
            <el-table-column prop="name" width="180">
              <template #header>
                <div style="width: 100%; text-align: left">名称</div>
              </template>
              <template #default="scope">
                <div style="display: flex; align-items: center" class="name">
                  <el-icon><folder /></el-icon>
                  <!-- <span style="margin-left: 10px">
                  {{ scope.row.folderName }}
                </span> -->
                  <span
                    style="margin-left: 10px"
                    v-html="scope.row.folderName"
                  ></span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="position" label="原位置" />
            <el-table-column prop="updateTime" label="删除时间" />
            <el-table-column label="操作" width="100">
              <template #default="scope">
                <el-dropdown placement="bottom" popper-class="opeDropdown">
                  <el-button link size="small" :icon="More" class="moreBtn">
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="RecoveryFile(scope.row)">
                        <el-button link :icon="FileRecovery">恢复</el-button>
                      </el-dropdown-item>
                      <el-dropdown-item @click="DeleteFile(scope.row)">
                        <el-button type="danger" link :icon="Delete"
                          >删除
                        </el-button>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </Dividetb>
  </Layout>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { More, Delete } from "@element-plus/icons-vue";
import useTagStore from "@/stores/tagList";
import Layout from "./layout.vue";
import Dividetb from "@/layout/components/dividetb.vue";
import TopBox from "@/components/TopTitleBox/index.vue";
import FilterSearch from "@/components/TopTitleBox/FilterSearch.vue";
import topButtonGroup from "@/components/ButtonGroup/topButtonGroup.vue";
import FileRecovery from "@/assets/customIcon/FileRecovery.vue";
import { getRecycleBinList } from "@/api/folder.js";
import { cellMouseEnter, cellMouseLeave } from "@/utils/cellmouseEvent.js";
defineOptions({ name: "MyBin" });
const route = useRoute();
const tagStore = useTagStore();
// 按钮列表
const tbuttonList = ref([
  {
    label: "回退",
    icon: "el-icon-back",
    type: "b2",
    onClick: () => {
      console.log("点击了回退");
      tagStore.historyBack({
        name: route.path,
        breadcrumbName: route.query.name || "文档",
      });
    },
  },
  {
    label: "前进",
    icon: "el-icon-right",
    type: "b2",
    onClick: () => {
      console.log("点击了我的文件夹");
      tagStore.historyFoward({
        name: route.path,
        breadcrumbName: "文档",
      });
    },
  },
  {
    label: "添加",
    icon: "el-icon-CirclePlus",
    type: "b2",
    onClick: () => {
      console.log("点击了我的文件夹");
    },
  },
  {
    label: "刷新",
    icon: "el-icon-refresh",
    type: "b2",
    onClick: () => {
      console.log("点击了我的知识库");
    },
  },
  {
    label: "评论",
    icon: "el-icon-ChatDotRound",
    type: "b2",
    onClick: () => {
      console.log("点击了评论");
    },
  },
  {
    label: "盖章？",
    icon: "el-icon-stamp",
    type: "b2",
    onClick: () => {
      console.log("点击了我的知识库");
    },
  },
  {
    label: "这又是什么？",
    icon: "el-icon-refresh",
    type: "b2",
    onClick: () => {
      console.log("点击了我的知识库");
    },
  },
  {
    label: "删除",
    icon: "el-icon-delete",
    type: "b2",
    onClick: () => {
      console.log("点击了我的知识库");
    },
  },
  {
    label: "啥",
    icon: "FaAlignJustify",
    type: "b2",
    onClick: () => {
      console.log("点击了回收站");
    },
  },
]);
const tableData = ref([
  {
    name: "文档1",
    position: "文件夹1",
    updateTime: "2023-08-15 10:30:00",
  },
  {
    name: "文档2",
    position: "文件夹2",
    updateTime: "2023-08-15 10:30:00",
  },
  {
    name: "文档3",
    position: "文件夹3",
    updateTime: "2023-08-15 10:30:00",
  },
]);
const RecoveryFile = (row) => {
  console.log("恢复文件", row);
};
const DeleteFile = (row) => {
  console.log("删除文件", row);
};
const total = ref(0);
const pagination = reactive({
  pageNum: 1,
  pageSize: 10,
});
const filtrateFormData = reactive({
  delFlag: "1",
});
const getMyBinList = async (data = {}) => {
  let params = { ...pagination, ...filtrateFormData, ...data };
  console.log(params, "获取列表数据1");
  await getRecycleBinList({ ...params }).then((res) => {
    if (res.code === 200) {
      console.log(res.rows, "获取列表数据2");
      tableData.value = res.rows;
      total.value = res.total;
    }
  });
};

const searchCallBack = (word, time) => {
  console.log("搜索回调", word, time);
};
onMounted(async () => {
  console.log("我的文件夹挂载完成");
  // 调用接口获取数据
  await getMyBinList();
});
</script>
<style lang="scss" scoped>
.tableBox {
  :deep(.cell) {
    display: flex;
    justify-content: center;
    font-size: var(--el-font-size-base);
    &:has(.name) {
      justify-content: start;
    }
  }
  :deep(.zhiding) {
    border-bottom: none !important;
  }
  .moreBtn {
    display: none;
    &.active {
      display: flex;
    }
  }
}
.opeDropdown {
  button {
    width: 100%;
    justify-content: start;
  }
}
</style>
